<template>
  <div class="container" :style="containerStyle">
    <navbar ref="navbar" title="我的选品车" theme="light" @rightItemClick="navbarRightItemClick"
            rightItemText="清空"></navbar>
    <list ref="commissionItemList"
          class="item-list-container"
          @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <textarea class="textarea" v-model="content" rows="4" placeholder="请输入选品库描述，如：清凉一夏必备品"></textarea>
        <div style="margin-top: 6" ref="top"></div>
      </cell>
      <cell v-if="itemSelectionCart.userItemSelectList.length" v-bind:key="rowIdx" v-for="(itemList, rowIdx) in commissionItemRowList">
        <div class="commission-item-row">
          <div class="commission-item" v-for="(item) in itemList" :style="{width: itemWidth + 'px',
          visibility: (item.id || item.sourceItemId) ? 'visible': 'hidden'}"
               @click="commissionItemClick(item)"
               v-bind:key="item.id  || item.sourceItemId">
            <image :src="item.picUrl" :style="{width: itemWidth + 'px', height: itemWidth + 'px'}" resize="cover" class="item-pic"></image>
            <div class="detail-row">
              <div class="price">
                <text class="price-y">¥</text>
                <text class="price-val">{{item.price}}</text>
              </div>
              <text class="origin-price">¥{{item.originPrice}}</text>
            </div>
            <div class="topbar">
              <text class="btn btn-primary topbar-btn btn-del" @click="delClick(item)">删除</text>
            </div>
          </div>
        </div>
      </cell>
      <cell>
        <div style="height: 130px;" v-if="itemSelectionCart.userItemSelectList.length"></div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" :icon="sorryIcon" v-if="!itemSelectionCart.userItemSelectList.length"></page-notice>
      </cell>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
    <wxc-loading :show="loadingShow"></wxc-loading>
    <div class="footer">
      <text class="btn btn-warning btn-large" @click="save" style="flex: 1">保存</text>
    </div>
    <wxc-dialog title="温馨提示"
                :content="dialogContent"
                :show="dialogShow"
                :single="true"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
    </wxc-dialog>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/buttons";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }
  .item-list-container {
    /*background-color: #FFFFFF;*/
  }

  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px;
    flex-direction: row;
  }

  .commission-item-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px 10px 10px;
  }
  .commission-item {
    background-color: #fff;
    position: relative;
  }

  .topbar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    left: 0;
    align-items: center;
    justify-content: flex-end;
    justify-items: flex-end;
    flex-direction: row;
    &-btn {
      margin-left: 10px
    }
  }

  .detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 5 10px;
    align-items: center;
  }
  .origin-price {
    color: $color-muted;
    font-size: 24px;
    text-decoration: line-through;
    font-weight: 100;
  }
  .price {
    flex-direction: row;
    align-items: flex-end;
    &-y {
      font-size: 24px;
      color: $color-primary;
      font-weight: 100;
    }
    &-val {
      color: $color-primary;
      font-size: 32px;
    }
  }

  .btn-del{
    font-size: 28px;
    color: #FFFFFF;
  }

  .textarea {
    font-size: 28px;
    line-height: 32px;
    color: $color;
    background-color: #f5f5f5;
    padding: 20px;
  }
</style>
<script>

import {WxcLoading, WxcDialog} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let dom = weex.requireModule('dom')
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')
let grouping = require('./include/grouping')
// let modal = weex.requireModule('modal')
let paddingValue = [0, 12, 40]
let itemSelectionCart = require('./include/item-selection-cart')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-scrolltop'),
    require('./mixin/page-loading-more')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    'navbar': require('./components/navbar.vue'),
    WxcLoading,
    WxcDialog
  },
  props: {
    height: {default: 0},
    back: {default: true},
    recommend: {default: ''},
    title: {default: null}
  },
  data () {
    return {
      itemSelectionCart: itemSelectionCart,
      commissionItemRowList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      sorryIcon: 'images/aiya.png',
      loadingShow: false,
      dialogShow: false,
      itemWidth: 750,
      column: 3,
      content: '',
      dialogContent: '',
      saveDoing: false,
      createResultDialogShow: false
    }
  },
  created () {
    this.itemWidth = (750 - paddingValue[this.column - 1]) / this.column
    this.sorryIcon = urlPath.assets(this.sorryIcon)
    Deferred.when(this.loadData()).always(() => {
    })
    this.$watch('itemSelectionCart.userItemSelectList', () => {
      this.commissionItemRowList = grouping(this.itemSelectionCart.userItemSelectList, this.column, item => {
        item.$_platformIcon = urlPath.assets('images/icon/platform/' + item.ecomPlat + '.png')
        return item
      }, {})
    })
  },
  methods: {
    loadData () {
      this.itemSelectionCart.initUserItemSelection()
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, Deferred.when(this.loadData(), this.searchItem().always(() => {
        dom.scrollToElement(this.$refs.top)
      })))
    },
    gotoTop () {
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    commissionItemClick (item) {
      navigator.push('commission-item.js?id=' + item.id)
    },
    commissionItemDel (item) {
      this.loadingShow = true
    },
    delClick (item) {
      itemSelectionCart.del(item)
    },
    navbarRightItemClick () {
      itemSelectionCart.clear()
    },
    wxcDialogConfirmBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.dialogShow = false
      this.dialogBtnConfirmClick && this.dialogBtnConfirmClick()
    },
    save () {
      if (!this.itemSelectionCart.userItemSelectList.length) {
        this.dialogContent = '您还没有选择任何商品，请先选品'
        this.dialogShow = true
        this.dialogBtnConfirmClick = null
        return
      }
      if (this.saveDoing) {
        return
      }
      this.saveDoing = true
      this.loadingShow = true
      let itemIdList = []
      let sourceItemIdList = []
      let ecomPlatList = []
      this.itemSelectionCart.userItemSelectList.forEach(item => {
        if (item.id) {
          itemIdList.push(item.id)
        } else {
          sourceItemIdList.push(item.sourceItemId)
          ecomPlatList.push(item.ecomPlat)
        }
      })
      let data = {
        content: this.content,
        itemIdList: itemIdList,
        sourceItemIdList: sourceItemIdList,
        ecomPlatList: ecomPlatList
      }
      // modal.alert({message: JSON.stringify(data)})
      api.userItemSelection.create(data).done(rs => {
        this.dialogContent = '恭喜您，选品库保存成功'
        this.dialogBtnConfirmClick = function () {
          this.itemSelectionCart.clear()
          navigator.pop()
        }
        this.dialogShow = true
      }).always(() => {
        this.saveDoing = false
        this.loadingShow = false
      })
    }
  }
}
</script>
